<template>
  <div id="app">
    <div class="myeditprofile">
      <!-- head部分 -->
      <myheader class="top" title="编辑用户资料">
        <div slot="left">
          <van-icon
            name="arrow-left"
            @click="$router.back()"
            slot="left"
          ></van-icon>
        </div>
        <router-link
          class="van-icon van-icon-wap-home-o"
          to="/index"
          slot="right"
        >
        </router-link>
      </myheader>
      <div class="head">
        <span>点击更改头像</span>
        <van-uploader :after-read="afterRead" />
      </div>
      <!-- 昵名 -->
      <mycell
        class="mycell"
        title="昵名"
        :content="obj.nickname"
        @click="nicknameshow = !nicknameshow"
      ></mycell>
      <van-dialog
        v-model="nicknameshow"
        title="昵名修改"
        show-cancel-button
        @confirm="handleUser"
        @cancel="newobj.nickname = obj.nickname"
      >
        <myinput
          class="container_margin"
          placeholder="请输入新的昵名"
          required
          v-model="newobj.nickname"
        />
      </van-dialog>
      <!-- 密码 -->
      <mycell
        class="mycell"
        title="密码"
        content="******"
        @click="passwordshow = !passwordshow"
      >
      </mycell>
      <van-dialog
        v-model="passwordshow"
        title="密码修改"
        show-cancel-button
        @confirm="changepassword"
        @cancel="oldpass = newpass1 = newpass2 = ''"
      >
        <van-field
          label="原密码"
          required
          v-model="oldpass"
          placeholder="请输入原密码"
          type="password"
        />
        <van-field
          type="password"
          label="新密码"
          required
          v-model="newpass1"
          placeholder="请输入新密码"
        />
        <van-field
          type="password"
          label="新密码"
          required
          v-model="newpass2"
          placeholder="再次输入新密码"
        />
      </van-dialog>
      <!-- 性别 -->
      <mycell
        class="mycell"
        title="性别"
        :content="obj.gender == 0 ? '女' : '男'"
        @click="gendershow = !gendershow"
      ></mycell>
      <van-dialog
        v-model="gendershow"
        show-cancel-button
        title="性别修改"
        @confirm="handleUser"
        @cancel="newobj.gender = obj.gender"
      >
        <van-picker
          @change="chooesgender"
          :columns="['女', '男']"
          :default-index="obj.gender"
        />
      </van-dialog>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import myheader from "../components/header.vue";
import myinput from "../components/myinput.vue";
import mycell from "@/components/cell.vue";
export default {
  data() {
    return {
      id: -1,
      obj: {},
      oldpass: "",
      newpass1: "",
      newpass2: "",
      newobj: {
        gender: 1,
        nickname: "",
      },
      nicknameshow: false,
      gendershow: false,
      passwordshow: false,
    };
  },
  components: {
    myheader,
    mycell,
    myinput,
  },

  methods: {
    async getUserByid(id) {
      return await this.$http.get("user/" + id);
    },
    async updateUser(user) {
      return await this.$http.post("user/update", user);
    },
    async updatePass(user) {
      return await this.$http.post("user/password", user);
    },
    async upload(file) {
      return await this.$http.post("/upload", file);
    },
    async updateAvator(user) {
      return await this.$http.post("user/avator", user);
    },
    handleUser() {
      const user = {
        id: this.id,
        nickname: this.newobj.nickname,
        gender: this.newobj.gender,
      };
      this.updateUser(user).then((res) => {
        if (res.data.code === 200) {
          Toast.success("修改成功");
          this.obj = this.newobj;
        } else {
          Toast.success("修改失败");
        }
      });
    },
    chooesgender(picker, value, index) {
      this.newobj.gender = index;
    },
    changepassword() {
      const user = {
        user_id: this.id,
        password: this.newpass2,
      };
      this.updatePass(user).then((res) => {
        if (res.data.code === 200) {
          Toast.success("修改成功,请重新登录");
          setTimeout(() => {
            localStorage.removeItem("user");
            this.$router.push({ name: "login" });
          }, 1000);
        } else {
          Toast.success("修改失败");
        }
      }).catch(err=>{
        console.log(err);
      });
    },
    afterRead(file) {
      let formdata = new FormData();
      formdata.append("file", file.file);
      this.upload(formdata).then((res) => {
        if (res.data.code === 200) {
          let user = {
            head_img: res.data.result,
            id: this.id,
          };
          this.updateUser(user).then((res) => {
            if (res.data.code === 200) {
              Toast.success("修改成功");
            } else {
              Toast.success("修改失败");
            }
          }).catch(err=>{
            console.log(err);
          });
        } else {
          Toast.success("修改失败");
        }
      }).catch(err=>{
        console.log(err);
      });
    },
  },
  mounted() {
    this.id = this.$route.params.id;
    this.getUserByid(this.id).then((res) => {
      this.obj = res.data.result;
      this.newobj = res.data.result;
    });
  },
};
</script>

<style lang="less" scoped>
.margin10 {
  margin-top: 10px;
}
.head {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px 0;

  /deep/.van-uploader__upload {
    width: 100 / 360 * 100vw;
    height: 100 / 360 * 100vw;
    margin: 0;
  }
  /deep/ .van-uploader {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
  }
  img {
    display: block;
    width: 100 / 360 * 100vw;
    height: 100 / 360 * 100vw;
    border-radius: 50%;
  }
}
#app .userchange {
  color: #000;
}
#app .van-icon-wap-home-o {
  color: #000;
  font-size: 25px;
}
</style>